<template>
  <div class="window">
    <header-three :desc="xsdh"></header-three>

    <!--轮播图-->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img :src="getProductImg" alt=""></div>
        <div class="swiper-slide"><img :src="getProductImg" alt=""></div>
        <div class="swiper-slide"><img :src="getProductImg" alt=""></div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <!--抢购时间-->
    <div id="snapTime-container" >
      <div class="snapTime" v-if="getIsPrice">
        <span>抢购价:¥{{getProductPrice}}</span>
        <span>{{time}}</span>
        <span>提醒我</span>
      </div>
      <div class="snapTime" v-else>
        <span>还剩下100件, 再不抢购就没有了</span>
      </div>
    </div>

    <div id="price">

      <div class="detail" >
        <img src="../../../assets/shortProduct/productDetail/england.png" alt="">
        <span id="font-red">英国直邮</span>
        <span>{{getTxt}}</span>
      </div>
      <p id="oldPrice">{{getIsPrice}}</p>
      <p id="tariffs">关税 : ¥10 <span @click="server()">详情 > </span></p>
      <p id="postage">邮费 : ¥50</p>
    </div>
    <div id="integral">
      <div id="integral-title">
        <img src="../../../assets/shortProduct/productDetail/jifengou.png" alt="">
        <span>5000000积分可抵500元, 限购一件</span>
      </div>
    </div>
    <div id="conditions">
      <ul id="conditions-title">
        <li id="conditions-no-support">
          <img src="../../../assets/shortProduct/productDetail/nosupport.png" alt="">
          <span>不支持7天无忧退款</span>
        </li>
        <li id="conditions-directMail">
          <img src="../../../assets/shortProduct/productDetail/fly.png" alt="">
          <span>海外直邮</span>
        </li>
        <li id="conditions-ensure">
          <img src="../../../assets/shortProduct/productDetail/zhengpin.png" alt="">
          <span>正品保证</span>
          <span id="more" @click="server()"> > </span>
        </li>
      </ul>
    </div>
    <div id="address">
      <div id="address-title">
        <img src="../../../assets/shortProduct/productDetail/england.png" alt="">
        <span>直邮, 下单时需要提供真实姓名和身份证号码以及收货地址请先去添加并填写这些信息</span>
        <span id="toAdd">去添加</span>
      </div>
    </div>
    <!--服务弹出框-->
    <section v-show="isShow" id="server-show">
      <div id="opacity-black">

      </div>
      <ul class="server-instructions">
        <li>
          <span>服务说明</span>
          <img src="../../../assets/shortProduct/productDetail/close.png" alt="" @click="server()" id="close">
        </li>
        <li>
          <p class="server-title">
            <img src="../../../assets/shortProduct/productDetail/nosupport.png" alt="">
            <span class="server-name">不支持7天无忧退款</span>
          </p>
          <p class="server-content">
            该商品特殊性,一经售出不存在质量问题不享受7天无理由退款. 请在收到商品后在拆封或者试穿之前检查外观和附属物品.
          </p>
        </li>
        <li>
          <p class="server-title">
            <img src="../../../assets/shortProduct/productDetail/fly.png" alt="">
            <span class="server-name">海外直邮</span>
          </p>
          <p class="server-content">
            下单之后英国直邮商品平均7-10个工作日发货,发货后平均12-20个工作日到货,特殊情况除外.包裹将有专业国际物流公司为你发货,无法送达的地方会转为其他物流.
          </p>
        </li>
        <li>
          <p class="server-title">
            <img src="../../../assets/shortProduct/productDetail/zhengpin.png" alt="">
            <span class="server-name">正品保证</span>
          </p>
          <p class="server-content">
            本商品绝对正品保证
          </p>
        </li>
      </ul>
    </section>
    <!--服务承诺-->
    <div class="tian-f-two"></div>
    <div id="server">
      <h3 id="server-cn">服务承诺</h3>
      <div id="server-line">
        <ul id="server-ensure">
          <li><img src="../../../assets/shortProduct/productDetail/zhengpin1.png" alt="">
            <p class="pushGoods-name">正品保证</p>
          </li>
          <li><img src="../../../assets/shortProduct/productDetail/fly1.png" alt="">
            <p class="pushGoods-name">海外直邮</p></li>
          <li>
            <img src="../../../assets/shortProduct/productDetail/bu.png" alt="">
            <p class="pushGoods-name">超时发货补贴</p>
          </li>
          <li>
            <img src="../../../assets/shortProduct/productDetail/picc.png" alt="">
            <p class="pushGoods-name">PICC承保</p>
          </li>
        </ul>
      </div>
    </div>

    <div id="smallTips">
      <div id="tips">
        <img src="../../../assets/shortProduct/productDetail/tips.png" alt="">
      </div>
      <div id="smallTips-contnet">
        <p>运费相关: 英国直邮相关商品价格为50元</p>
        <p>
          价格说明: 划线价、国内参考价、店头价可能是品牌专柜价,吊牌价或品牌商提供的指导价等价格,其受国内地区、时间和市场行情波动影响而可能与你购物时看到的不一致,该价格仅供参考.
        </p>
        <p>商品包装: 海外商品包装更换较为频繁,因此顾客你收到的货品有可能与图片不一致,页面图片及描述仅供参考,请你以最终收到的实物为准,由此给你带来的不便请你多谅解</p>
        <p>服务承诺: 阿拉灯承诺站内销售商品均为海外原装正品,并会持续为顾客们带来海外最新产品.</p>
      </div>
    </div>
    <!--加入购物车-->
    <ul id="bottom">
      <li>
        <img src="../../../assets/shortProduct/productDetail/lineserve.png" alt="">
        <span>在线服务</span>
      </li>
      <li @click="pushcar()">
        加入购物车
      </li>
    </ul>
    <div class="ponetin">再次下拉将会跳转图文详情</div>

  </div>
</template>
<script>
  import HeaderThree from '../../shortProduct/HeaderThree.vue'
  import * as $ from 'jquery'
  import * as Swiper from 'swiper'
  import 'swiper/dist/css/swiper.css'
  import Vue from 'vue'
  export default {
    data() {
      return{
        xsdh: '商品详情',
        isPrice: true,
        price: 160,
        isShow: false,
        time: '今天15:00限量开抢',
        brandName: '红粉佳人',
        isMounted: false,
        isUpdated: false,
        amount: 0
      }
    },
    components:{
      HeaderThree
    },
    computed:{
      getProductImg() {
        return this.$route.params.productImg;
      },
      getProductPrice() {
        return this.$route.params.productPrice;
      },
      getIsPrice() {
        return this.$route.params.isPrice;
      },
      getTxt() {
        return this.$route.params.isTxt;
      },
      getID() {
        return this.$route.params.wid;
      }
    },
    mounted() {
      console.log('ppppp', this.getProductImg);
      new Swiper['default']('.swiper-container', {
        loop: true,
        autoplay:true,
        // 如果需要分页器
        pagination: {
          el: '#wrapper .swiper-pagination',
          type: 'bullets',
          clickable :true
        }
      });
      let _this = this;
      let sw = true;
//      监听滚动
      window.onscroll = function(){
        // console.log(document.documentElement.clientHeight+'-----------'+window.innerHeight); // 可视区域高度
        // console.log(document.body.scrollTop); // 滚动高度
        // console.log(document.body.offsetHeight); // 文档高度
        // 判断是否滚动到底部
          console.log(123456);
        if(document.documentElement.scrollTop + window.innerHeight >= document.body.offsetHeight) {
          // console.log(sw);
          console.log(33333333);
          // 如果开关打开则加载数据
            // 将开关关闭
          if(_this.isMounted == true){
            _this.isMounted = false;
            console.log(456789);
            _this.tiaozhuan();
          }
        }
      };

    },
    methods:{
      // 加入购物车 并且跳转购物车
      pushcar() {
        this.amount++;
        let amounts = this.amount;
        Vue.axios.get('/goods/product', {
          params: {
            ID: this.getID
          }
        }).then((re) => {
          console.log(re.data[0].img);
          this.amount++;
//        写入表三, 表一查询到的数据
          Vue.axios.get('/goods/cars', {
            params: {
              ID: re.data[0].ID,
              img: re.data[0].img,
              name: re.data[0].name,
              price: re.data[0].price,
              standard: re.data[0].standard,
              surplus: re.data[0].surplus,
              brand: re.data[0].brand,
              address: re.data[0].address,
              amount: amounts
            }
          }).then((reult) => {
            console.log('加入成功了!!!', this.amount);

          })
        })
      },
      tiaozhuan() {
        console.log('hohouhou');
        this.$router.push({name: 'imgTop', params: {hou: this.getProductImg}});
      },
      server() {

        this.isShow = !this.isShow;
        console.log(this.isShow);
        if(this.isShow){
          $('#server-show').css({
            "width": $(window).width(),
            "height": $(window).height(),
            "position": 'fixed',
            "top": '0',
            "zIndex": 100
          })
          $('#server-show').on('touchmove',function(e){
            e.preventDefault();
          })
        }
      },
    },
    activated(){
      this.isMounted = true;
    },
    deactivated(){
      window.onscroll = null;
    }
//    updated(){
////      console.log('updated');
//    }
  }
</script>
<style scoped>
  .ponetin {
    margin-top: .5rem;
    font-size: 1rem;
    background: rgb(242, 242, 242);
    height: 2.5rem;
    line-height: 3rem;
    margin-bottom: 6rem;
    color: red;
    padding-left: 2rem;
  }
  .window {
    position:  relative;
    padding-bottom: 5rem;
  }
  .swiper-pagination-bullet-active{
    background-color: red;
  }
  .swiper-container{
    width:100%;
    height: 20rem;
  }
  .swiper-slide {
    width: 100%;
    text-align: center;
  }
  .swiper-slide img{
    /*width: 100%;*/
    margin-top: 3.6rem;
    height: 12.8rem;
  }

  #snapTime-container{
    width:100%;
    height: 5rem;
    background-color: #e53e42;
  }
  #snapTime-container .snapTime{
    width: calc(100% - 2rem);
    height: 100%;
    margin: 0 auto;
    color: white;
  }
  .snapTime span:nth-child(1){
    display: inline-block;
    font-size: 1.5rem;
    line-height: 5rem;
    margin-right: 4.9rem;
  }
  .snapTime span:nth-child(2){
    font-size: 1.2rem;
    margin-right: 1rem;
  }
  .snapTime span:nth-child(3){
    display: inline-block;
    width:6rem;
    height: 2rem;
    font-size: 1.2rem;
    color: red;
    line-height: 2rem;
    text-align: center;
    background-color: white;
    border-radius: 2rem;
  }
  #price{
    width: calc(100% - 2rem);
    margin: 0 auto;
    padding-bottom: 0.5rem;
  }
  #price img{
    width: 2rem;
    vertical-align: top;
  }
  .detail{
    display: inline-block;
    font-size: 1.5rem;
    vertical-align: top;
  }
  .detail #font-red{
    color: #e53e42;
  }
  #price #oldPrice{
    font-size: 1.8rem;
    color: #e53e42;
  }
  #tariffs, #postage{
    font-size: 1.2rem;
    color: #4d4d4d;
  }
  #tariffs span{
    display: inline-block;
    width: 3rem;
    height: 1.2rem;
    font-size: 0.8rem;
    line-height: 1.2rem;
    color: #e53e42;
    text-align: center;
    border: 1px solid #e53e42;
  }
  /*积分够*/
  #integral{
    width:100%;
    height: 3rem;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
  }
  #integral-title{
    width:calc(100% - 2rem);
    margin: 0 auto;
    margin-top: 0.8rem;
  }
  #integral-title img{
    width:3.5rem;
    vertical-align: middle;
  }
  #integral-title span{
    font-size: 1.2rem;
    color: #4d4d4d;
    margin-left: 1.5rem;
    vertical-align: middle;
  }
  /*不支持退款*/
  #conditions{
    width: 100%;
    height: 3rem;
    border-bottom: 1px solid #cccccc;
  }
  #conditions-title{
    width: calc(100% - 2rem);
    margin: 0 auto;
    display: flex;
  }
  #conditions-title li{
    text-align: center;
    font-size: 1rem;
    margin-top: 0.8rem;
    position: relative;
    flex: 1;
  }
  #conditions-title li>img{
    width: 1.5rem;
    vertical-align: middle;
  }
  #conditions-title li>span{
    vertical-align: middle;

  }
  #more{
    display: inline-block;
    position: absolute;
    top:-0.3rem;
    right: 0;
    font-size: 1.5rem;
    color: #808080;
  }
  /*添加地址*/
  #address-title{
    width: calc(100% - 2rem);
    margin: 0 auto;
    font-size: 1.5rem;
    color: #e53e42;
    position: relative;
    margin-top: 0.5rem;
  }
  #address{
    width: 100%;
    height: 5rem;
    overflow: hidden;
    box-shadow: 0px 1px 0px 0px
    #cccccc;
  }
  #address-title img{
    width: 2rem;
    vertical-align: top;
  }
  #address-title span:nth-child(1){
    vertical-align: top;
  }
  #address-title #toAdd{
    display: block;
    width: 4rem;
    height: 1.5rem;
    position: absolute;
    top:2.5rem;
    right: 0;
    font-size: 0.9rem;
    border: 1px solid #e53e42;
    border-radius: 0.1rem;
    text-align: center;
    vertical-align: 1.5rem;
  }
  /*服务说明*/
  #opacity-black{
    height: calc(100% - 30rem);
    background-color: black;
    opacity: 0.3;
    touch-action: none;
  }
  .server-instructions{
    height: 30rem;
    background-color: white;
    padding-left: 1rem;
    padding-right: 1rem;
    opacity: 1 !important;
    position: absolute;
    bottom: 0;
  }
  .server-instructions li:nth-child(1){
    font-size: 1.4rem;
    text-align: center;
    margin-top: 1rem;
    padding-bottom: 1rem;
    border-bottom:1px solid #cccccc ;
    position: relative;
  }
  .server-instructions li:nth-child(1) img{
    width:1.2rem;
    position: absolute;
    top:0.4rem;
    right: 0;
  }
  .server-instructions li:nth-child(2) img,
  .server-instructions li:nth-child(3) img,
  .server-instructions li:nth-child(4) img{
    width:1.5rem;
    vertical-align: middle;
  }
  .server-title{
    margin: 0.5rem 0;
  }
  .server-name{
    font-size: 1.4rem;
    color: #e53e42;
    vertical-align: middle;
  }
  .server-content{
    font-size: 1.2rem;
    color: #808080;
  }
  .server-instructions li:nth-child(3),
  .server-instructions li:nth-child(2){
    margin-bottom: 0.5rem;
  }
  .server-instructions li:nth-child(3),
  .server-instructions li:nth-child(4){
    border-top: 1px solid #cccccc;
  }
  /*服务承诺*/
  #smallTips{
    background-color: #f2f2f2;
    padding-bottom: 1rem;
  }
  #tips{
    width: 100%;
    text-align: center;
  }
  #tips img{
    width: calc(100% - 9rem);
  }
  #smallTips-contnet{
    width: calc(100% - 2rem);
    margin: 0 auto;
    font-size: 1.2rem;
    color: #4d4d4d;
  }
  #smallTips-contnet p{
    margin-top: 1rem;
  }
  #bottom{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
  }
  #bottom li{
    flex: 1;
    text-align: center;
    font-size: 1.4rem;
    color: #4d4d4d;
    height: 5rem;
    line-height: 5rem;
  }
  #bottom li>img{
    height: 1.5rem;
  }
  #bottom li:nth-child(1){
    background-color: white;
  }
  #bottom li:nth-child(2){
    background-color: #e53e42;
    color: white;
  }

  #server{
    width:100%;
    height: 12.3rem;
  }
  #server-ensure{
    width: calc(100% - 2rem);
    margin: 0 auto;
    margin-top: 2rem;
    position: relative;
  }
  #server-ensure li{
    text-align: center;
    position: absolute;
    width: 25%;
  }
  #server-ensure li:nth-child(1){
    position: absolute;
    top:0;
    left:0;
  }
  #server-ensure li:nth-child(2){
    position: absolute;
    top:0;
    left:25%;
  }
  #server-ensure li:nth-child(3){
    position: absolute;
    top:0;
    left:50%;
  }
  #server-ensure li:nth-child(4){
    position: absolute;
    top:0.8rem;
    left:75%;
  }
  #server-ensure li>p{
    margin-top: 0.6rem;
  }
  #server-ensure li:nth-child(4)>p{
    margin-top: 1.2rem;
  }
  #server-line{
    width: 100%;
    margin-top: 1rem;
    border-top: 1px solid #cccccc;
  }
  #server-ensure li>img{
    width: 3rem;
  }
  #server-ensure li:nth-child(4) img{
    width: 4rem;
  }
  #server-cn{
    height: 1.5rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
    color: #4d4d4d;
    border-left: 0.3rem solid #e53e42;
    margin-top: 0.75rem;
    padding-left: 0.5rem;
  }
</style>
